<template>
  <div class="container page">
    <van-nav-bar
        title="兑现积分"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="main">
      <div class="title-header-div">
        <ul>
          <li><span>可兑换积分</span><span>{{ userInfo.money }}积分</span>
          </li>
          <li><span>手续费</span><span>{{ fee }}</span></li>
        </ul>
      </div>
      <div class="addBankCard" v-if="userInfo.bankinfos">
        <span>{{ userInfo.bankinfos.bankinfo }} (****) </span>
        <i class="van-badge__wrapper van-icon van-icon-success"></i>
      </div>
      <div class="addBankCard" v-else>
        <span @click="$router.push({ name: 'BindCard'})" style="font-weight: bolder"> 前往绑定银行卡 </span>
      </div>
      <div class="withdrawMoney">
        <div class="money">
          <div class="moneyNumber"><span class="moneyType">兑换积分</span>
            <van-field v-model="amount" type="number"/>
            <span></span>
          </div>
        </div>
        <div class="withdrawal-tips"><p><span><strong
        >注意:</strong></span></p>
          <p><span>兑换时间 :<strong> 24小时</strong></span>
          </p></div>
      </div>
      <button class="btn-immediately" :disabled="!this.amount || !userInfo.bankinfos" @click="showPassword = true">确定兑换</button>
    </div>
    <van-overlay :show="showPassword" class-name="mask" style="z-index: 10; animation-duration: 0.35s;">
      <van-number-keyboard
          z-index="99999"
          :hide-on-click-outside="false"
          :show="showPassword"
          @input="onInput"
          @delete="onDelete"
          @blur="onClose"
      />
      <div class="wrapper">
        <div class="block">
          <div class="dialog-header" @click="onClose"><span>请输入资金密码</span><i
              class="van-badge__wrapper van-icon van-icon-cross close"></i>
          </div>
          <div class="dialog-body">
            <van-password-input v-model="payPass" :length="4" gutter="10" :focused="true" />
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {getWithdrawConfig, setUserWirhdraw} from "@api/Withdraw";
// import { userSetter } from "core-js/library/es6/symbol";
// import { storageStore } from "storage/storage.model";
import {Toast} from "vant";
import {mapGetters} from "vuex";

export default {
  name: "Withdraw",
  created() {
    this.initInfo();
	//判断是否设置了支付密码，
	if(!this.userInfo.paypassword){
		this.$router.push({
		  name: "Capital"
		})
	}
  },
  computed: {
    fee: function () {
      if (!this.amount)
        return 0;
      if (!this.drawInfo && !this.drawInfo.fee_bili)
        return 0;
      let _fee = this.drawInfo.fee_bili;
      _fee = _fee.substr(0, _fee.length - 1);
      return (parseInt(this.amount) * parseInt(_fee) / 100.0).toFixed(2);
    },
    ...mapGetters(["userInfo"])
  },
  data: function () {
    return {
      maxLength: 4,
      amount: "",
      payPass: "",
      drawInfo: {},
      showPassword: false,
    }
  },
  methods: {
    initInfo() {
      getWithdrawConfig().then(v => {
        this.drawInfo = v.data;
      })
    },
    onInput: function (str) {
      if (this.payPass.length < this.maxLength) {
        this.payPass += str;
      }
      if (this.payPass.length === this.maxLength) {
        this.showPassword = false;
        this.submit();
      }
    },
    onDelete: function () {
      if (this.payPass.length > 0) {
        this.payPass = this.payPass.substring(0, this.payPass.length - 1);
      }
    },
    onClose: function (){
      this.payPass = "";
      this.showPassword = false;
    },
    submit() {
      let that = this;
      Toast.loading({
        message: "正在提交申请,请稍后",
        duration: 0,
        forbidClick: false,
        onOpened: function () {
          setUserWirhdraw(that.payPass, that.amount).then(() => {
            that.payPass = "";
            Toast.clear();
            Toast.success({
              message: "提交提现申请成功",
              duration: 2000
            })
            that.amount = '';
          }).catch(() => {
            that.payPass = "";
            Toast.clear();
          })
        }
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-number-keyboard, ::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-password-input__item {
  height: 1.6rem;
  width: 1.6rem;
  text-align: center;
  border-radius: .26667rem
}

.container {
  overflow: auto;
  height: 100vh;
  font-size: .37333rem
}

.container .nav {
  background: linear-gradient(90deg, #fff, #fff);
  color: #fff
}

.container .van-nav-bar__text {
  color: #e38afb
}

.container .main {
  display: flex;
  flex-direction: column;
  background-color: #f4ebf3;
  height: calc(100% - 1.5rem);
  position: relative
}

.container .main .title-header-div ul {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.33333rem
}

.container .main .title-header-div ul li {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.container .main .title-header-div ul li > span:first-child {
  font-size: .42667rem;
  color: #000
}

.container .main .title-header-div ul li > span:nth-child(2) {
  font-size: .34667rem;
  color: #fa59b5;
  font-weight: 700
}

.container .main .addBankCard {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .21333rem .37333rem;
  margin: .26667rem 0
}

.container .main .addBankCard .withdrawindex-change {
  display: flex;
  align-items: center
}

.container .main .addBankCard .withdrawindex-change > span:first-child {
  font-size: .37333rem;
  color: #000
}

.container .main .addBankCard .withdrawindex-change > span:nth-child(2) {
  font-size: .37333rem;
  color: #fa59b5
}

.container .main .addBankCard span {
  padding-right: .53333rem;
  color: #fa59b5
}

.container .main .addBankCard .van-icon {
  margin-left: .26667rem;
  right: .26667rem;
  color: #000
}

.container .main .withdrawMoney {
  display: flex;
  flex-direction: column;
  color: #000;
  padding: 0 .37333rem
}

.container .main .withdrawMoney .h-title {
  line-height: .93333rem
}

.container .main .withdrawMoney .money {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: .26667rem 0
}

.container .main .withdrawMoney .money .moneyNumber {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 1.33333rem
}

.container .main .withdrawMoney .money .moneyNumber .moneyType {
  width: 2.66667rem
}

.container .main .withdrawMoney .money .moneyNumber .money-input {
  height: 1.33333rem;
  font-size: .53333rem;
  font-weight: 500
}

.container .main .withdrawMoney .money .moneyNumber .money-unit {
  font-size: .53333rem
}

.container .main .withdrawMoney .money .all {
  padding: .21333rem .26667rem;
  font-size: .37333rem;
  color: #ff253f
}

.container .main .withdrawMoney .password {
  display: flex;
  flex-direction: row;
  padding: .37333rem 0;
  border-bottom: .02667rem solid #f3f2f2
}

.container .main .withdrawMoney .password span {
  margin-right: .13333rem
}

.container .main .withdrawMoney .password input {
  border: .02667rem solid #f3f2f2;
  border-radius: .26667rem;
  width: 80%;
  font-size: .53333rem
}

.container .main .withdrawMoney .information {
  padding-bottom: .37333rem
}

.container .main .withdrawMoney .information .description {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .21333rem 0
}

.container .main .withdrawMoney .information .description-content {
  display: flex;
  align-items: center;
  height: .4rem
}

.container .main .withdrawMoney .information .description-content .label {
  margin-left: .13333rem;
  font-size: .34667rem;
  color: #979799
}

.container .main .withdrawMoney .information .balance .number {
  color: #ff253f
}

.container .main .withdrawal-tips {
  margin: .26667rem 0
}

.container .main .withdrawal-tips p {
  font-size: .34667rem;
  line-height: .8rem
}

.container .main .withdrawal-tips p span {
  color: #000;
  margin-right: .53333rem
}

.container .main .withdrawal-tips p span strong {
  color: #fa59b5
}

.container .main .btn-immediately {
  width: 6.66667rem;
  height: 1.06667rem;
  border-radius: .53333rem;
  outline: 0;
  border: 0;
  color: #fff;
  font-size: .42667rem;
  font-weight: 700;
  margin: .26667rem auto;
  background: linear-gradient(#e38afb, #fa59b5)
}

.container .main .btn-immediately:disabled {
  background: gray;
}

.container .wrapper {
  display: flex;
  justify-content: center;
  height: 100%
}

.container .wrapper .block {
  margin-top: 3.2rem;
  width: 90%;
  height: 4rem;
  background-color: #fa59b5;
  border-radius: .26667rem;
  padding: 0 .26667rem
}

.container .wrapper .block .dialog-header {
  margin-bottom: .53333rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  height: 1.06667rem;
  color: #000;
  border-bottom: .02667rem solid #f7f7f7;
  position: relative
}

.container .wrapper .block .dialog-header .close {
  position: absolute;
  right: 0;
  padding: .32rem 0 .32rem .32rem
}

.container .wrapper .block .dialog-footer {
  margin-top: .8rem;
  display: flex;
  justify-content: center
}

.container .wrapper .block .dialog-footer .btn, .container .wrapper .block .dialog-footer .isActive {
  width: 50%;
  height: 1.06667rem;
  border: 0;
  outline: 0;
  color: #fff;
  border-radius: .8rem
}

.container .wrapper .block .dialog-footer .btn {
  background-color: #c9c9c9
}

.container .wrapper .block .dialog-footer .isActive {
  color: #fcf0fa;
  background-color: #e38afb
}

.mask {
  background-color: rgba(0, 0, 0, .3)
}

.popover-body {
  max-width: 85vw
}

.popover-body p {
  font-size: .32rem
}

</style>
